<template>
  <div class="home">
    <HomeHeader></HomeHeader>
    <HomeSwiper :swiperlist="swiperList"></HomeSwiper>
    <HomeIcons :iconlist="iconList"></HomeIcons>
    <HomeRecommend :recommendlist="recommendList"></HomeRecommend>
    <Weekend :weekendlist="weekendList"></Weekend>
  </div>
</template>
<script>
import axios from 'axios'
import HomeHeader from './components/HomeHeader.vue'
import HomeSwiper from './components/HomeSwiper.vue'
import HomeIcons from './components/HomeIcons.vue'
import HomeRecommend from './components/HomeRecommend.vue'
import Weekend from './components/Weekend.vue'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      lastCity: '',
      iconList: [],
      recommendList: [],
      swiperList: [],
      weekendList: []
    }
  },
  computed: {
    ...mapState(['city'])
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    Weekend
  },
  methods: {
    getInfo() {
      axios.get('/api/index.json?city=' + this.city).then(this.getInfoSucc)
    },
    getInfoSucc(res) {
      res = res.data

      if (res.ret) {
        ;({ iconList: this.iconList, recommendList: this.recommendList, swiperList: this.swiperList, weekendList: this.weekendList } = res.data)
      }
    }
  },
  mounted() {
    this.lastCity = this.city
    this.getInfo()
  },
  activated() {
    if (this.lastCity != this.city) {
      this.getInfo()
      this.lastCity = this.city
    }
  }
}
</script>
<style lang="less" scoped></style>
